<!--页脚组件-->
<template>
    <footer class="footer-section section" :style="{background: 'url(' + bgUrl + ')'}">
        <!--Footer Top start-->
        <div class="footer-top section pt-100 pt-lg-80 pt-md-70 pt-sm-60 pt-xs-50 pb-60 pb-lg-40 pb-md-30 pb-sm-20 pb-xs-10">
            <div class="container">
                <div class="row row-25">
                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">
                        <img src="/images/logo-footer.png" alt="">
                        <p>{{systemDesc}}</p>
                    </div>
                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">
                        <h4 class="title"><span class="text">联系我们</span><span class="shape"></span></h4>
                        <ul>
                            <li><i class="fa fa-map-o"></i><span>{{companyAddr}}</span></li>
                            <li><i class="fa fa-phone"></i><span>{{phone}}</span>
                            </li>
                            <li><i class="fa fa-qq"></i><span>{{qq}}</span>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">
                        <h4 class="title"><span class="text">友情链接</span><span class="shape"></span></h4>
                        <ul>
                            <li v-for="(item,index) in friendsLink" :key="index">
                                <a :href="item.url" target="_blank">{{item.title}}</a>
                            </li>
                        </ul>
                    </div>
                    <div class="footer-widget col-lg-3 col-md-6 col-12 mb-40">
                        <h4 class="title"><span class="text">通讯录</span><span class="shape"></span></h4>
                        <p>添加我们的最新的通讯录，您会得到最新房产信息，并且得到最低折扣</p>
                        <form id="mc-form" class="mc-form footer-newsletter">
                            <input id="mc-email" type="email" autocomplete="off" placeholder="输入邮箱地址.."/>
                            <button id="mc-submit"><i class="fa fa-paper-plane-o"></i></button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer Top end-->

        <!--Footer bottom start-->
        <div class="footer-bottom section">
            <div class="container">
                <div class="row">
                    <div class="col-12">
                        <div class="copyright text-center">
                            <p>Copyright &copy;{{copyright}}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!--Footer bottom end-->
    </footer>
</template>

<script>
    export default {
        data() {
            return {
                bgUrl: '/images/bg/footer-bg.jpg'
            }
        },
        props: {
            systemDesc: {
                type: String,
                default: '房产交易平台the best theme for elit, sed do to eiumod tempor dolor sit amet, cteturadipiscing elit seddo dolor sit amet.'
            },
            companyAddr: {
                type: String,
                default: '成都市锦江区 东大街下东大街段258号 西部国际金融中心 1号楼22层（东门大桥地铁口附近）'
            },
            phone: {
                type: Number,
                default: 18123329817
            },
            qq: {
                type: Number,
                default: 614940318
            },
            friendsLink: {
                type: Array,
                default: function () {
                    return [
                        {title: '老九学堂', url: 'http://www.xuetang9.com'},
                        {title: '老九维基', url: 'http://wiki.xuetang9.com'},
                        {title: '老九论坛', url: 'http://bbs.xuetang9.com/'}
                    ]
                }
            },
            copyright: {
                type: String,
                default: ' 2019-2020 Extreme Academy.All rights reserved 蜀ICP备16015083号-2'
            }
        }
    }
</script>

<style scoped>
</style>
